<!-- 调拨单记录 -->
<template>
    <div id="change">
        <div class="change-top">
            单据日期&nbsp;
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" size="small" style="width: 150px;"
                v-model="changeList.createDate" type="date" placeholder="选择日期">
            </el-date-picker>
            &nbsp;&nbsp;业务员&nbsp;
            <el-select v-model="changeList.employeeId" size="small" style="width: 150px;margin-right: 20px;">
                <el-option v-for="(em, index) in emList" :key="index" :label="em.employeeName"
                    :value="em.employeeId"></el-option>
            </el-select>
            <el-button size="small" @click="saveChangeUpdate">保存</el-button>
            <el-button size="small" type="primary">导入</el-button>
            <el-button size="small" type="primary">导出</el-button>
            <el-button size="small" type="success">审核</el-button>
            <PublicLink />
        </div>
        <div class=" change-content">
            <el-table @row-click="handlerClick" :row-style="{ height: '55px' }" show-summary
                :summary-method="getSummaries" height="500px" :data="updateChangeList" border
                style="width: 100%;font-size: 13px;">
                <el-table-column>
                    <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
                </el-table-column>
                <el-table-column prop="goodcode" label="商品编号" width="240">
                    <template slot-scope="scope">
                        <el-input style="width: 150px;" size="small" v-model="scope.row.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goodname" label="商品名称" width="120">
                </el-table-column>
                <el-table-column prop="categoryName" label="商品类别" width="120">
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" width="120">
                </el-table-column>
                <el-table-column prop="unitname" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.num"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="outWid" label="调出仓库" width="150">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.outWid">
                            <el-option v-for="(wid, index) in storeList" :key="index" :label="wid.storeHomeName"
                                :value="wid.shId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="inputWid" label="调入仓库" width="150">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.inputWid">
                            <el-option v-for="(wid, index) in storeList" :key="index" :label="wid.storeHomeName"
                                :value="wid.shId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="detailRemark" label="备注" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.detailRemark"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-button style="position: relative;right: -1200px;" @click="goto('changeList')">历史单据</el-button>
        </div>
        <el-dialog top="20px" title="选择客户" :visible.sync="dialogShow">
            <ClientChoose ref="clientChoose" :dialogShow="dialogShow" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="yes">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
            <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="goodsShow = false">取 消</el-button>
                <el-button type="primary" @click="yesGoods">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import ClientChoose from '../public_com/ClientChoose.vue';
import GoodsChoose from '../public_com/GoodsChoose.vue';
import PublicLink from '../public_com/PublicLink.vue';

export default {
    name: 'UpdateOutBound',
    components: {
        PublicLink,
        ClientChoose,
        GoodsChoose
    },
    data() {
        return {
            goodsShow: false,
            dialogShow: false,
            updateChangeList: [],
            changeList: {
                cdId: '',
                goodcode: "",
                goodname: '',
                changeId: '',
                unitname: '',
                num: '',
                delId: '',
                outWid: '',
                inputWid: '',
                aboutCode: '',
                delId: '',
                detailRemark: '',

            },
            storeList: [],
            emList: []
        }
    },
    methods: {
        goto(to) {
            this.$router.push(to)
        },
        addRow() {
            this.updateChangeList.push({
                cdId: '',
                goodcode: "",
                goodname: '',
                changeId: '',
                unitname: '',
                num: '',
                delId: '',
                outWid: '',
                inputWid: '',
                aboutCode: '',
                delId: '',
                detailRemark: '',
                brandName: '',
                origin: '',
                categoryName: '',
                unitname: '',
                // isEdit: false
            })
        },
        reduceRow() {
            if (this.updateChangeList.length > 1) {
                this.updateChangeList.pop()
            }
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (column.property === "num") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                }
            });

            return sums;
        },
        yes() {
            this.dialogShow = false
            this.changeList.clientName = this.$refs.clientChoose.clientName
            this.changeList.clientId = this.$refs.clientChoose.clientId
        },
        yesGoods() {
            this.goodsShow = false
            // this.goodsList = 
            // console.log(this.goodsList)
            //遍历商品列表
            var detailList = this.$refs.chooseGoods.selectionList
            var indexs = []
            //删除表格中空白的行
            this.updateChangeList.forEach((detail, index) => {
                if (detail.goodcode == '') {
                    indexs.push(index)
                    console.log(index)
                }
            })
            indexs.reverse().forEach((index, i) => {
                console.log(index)
                this.updateChangeList.splice(index, 1)
            })
            console.log(this.updateChangeList)
            detailList.forEach((detail, index) => {
                this.updateChangeList.push(detail)
            })
        },
        //修改调拨单
        saveChangeUpdate() {
            //数据校验
            //金额正则
            const moneyRegix = /^\d+(\.\d{1,2})?$/
            //正整数正则
            const numRegix = /^[1-9]\d*$/
            if (this.changeList.employeeId == '') {
                this.errorMessage("请选择业务员")
                return
            }
            if (this.changeList.createDate == '') {
                this.errorMessage("请选择单据日期")
                return
            }

            for (var i = 0; i < this.updateChangeList.length; i++) {
                if (this.updateChangeList[i].goodcode == '') {
                    this.errorMessage("请填写第" + (i + 1) + "行商品编号");
                    return;
                }
                if (!numRegix.test(this.updateChangeList[i].num)) {
                    this.errorMessage("第" + (i + 1) + "行商品数量不合理");
                    return;
                }
                if (!this.updateChangeList[i].hasOwnProperty('inputWid')) {
                    this.errorMessage("请选择第" + (i + 1) + "行商品调入仓库");
                    return;
                }
                if (!this.updateChangeList[i].hasOwnProperty('outWid')) {
                    this.errorMessage("请选择第" + (i + 1) + "行商品调出仓库");
                    return;
                }
            }
            //拆分一下明细数组
            //获取调拨单明细
            var details = []
            this.updateChangeList.forEach((detail, index) => {
                details.push({
                    goodcode: detail.goodcode,
                    goodname: detail.goodname,
                    num: detail.num,
                    detailRemark: detail.detailRemark,
                    inputWid: detail.inputWid,
                    outWid: detail.outWid,
                    unitname: detail.unitname
                })
            })
            const formdata = new FormData()
            delete this.changeList.detailList
            formdata.append('changeList', JSON.stringify(this.changeList))
            formdata.append("changeDetailList", JSON.stringify(details))
            this.axios.post('/store/cl/updateChangeList',
                formdata
            ).then(rs => {
                if (rs.data.code = 200) {
                    this.successMessage("修改成功")

                } else {
                    this.errorMessage("修改出库单出错了")
                }
            })
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        getChangeListById(changeId) {
            this.axios.get("/store/cl/selectByChangeId", {
                params: {
                    changeId
                }
            }).then(rs => {
                this.changeList = rs.data.changeList
                this.updateChangeList = rs.data.changeList.detailList
            })
        },
        getStoreList() {
            this.axios.get('/info/storeHouse/getAllStore',
                {
                    params: {
                        cId: 1
                    }
                }
            ).then(rs => {
                this.storeList = rs.data.storeList
                this.getEmployees()
            })
        },
        getEmployees() {
            this.axios.get('/info/employee/listAll').then(rs => {
                this.emList = rs.data.list
            })
        }
    },
    created() {
        const changeId = this.$route.query.changeId
        this.getChangeListById(changeId)
        this.getStoreList()
    }

}
</script>

<style scoped>
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 40px;
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #fff1d4;
}

td.el-table__cell .el-button {
    width: 40px;
    margin-left: 0px;
}
</style>